import React, { Component } from 'react';
import styles from './index.less';
import {Carousel, Icon} from 'antd';
import { connect } from 'react-redux';
import {  NoData } from '../common/noData';
import { actionTypes } from './store';

class LunBoWrapper extends Component {
  constructor(props) {
    super(props);
    this.next = this.next.bind(this);
    this.prev = this.prev.bind(this);
  }
  next() {
    this.slider.slick.slickNext();
  }
  prev() {
    this.slider.slick.slickPrev();
  }
  render() {
    const lunboSetting = {
      dots: true,
      lazyLoad: true,
      autoplay:true,
      easing:'linear',
    };
  if(this.props.images && this.props.images.length >0){
    return(
      <div className = {styles.LunBoWrapper }>
        <Carousel {...lunboSetting} className={styles.lunbo} ref={el => {this.slider = el;} }>
          {    
            this.props.images.map((item,index) => {
              return(
                <div key={ item.id } >
                  <a href='#'><img alt='轮播图片' src={item.url}/></a> {index}
                </div>
              )
            })
          }
        </Carousel>,
        <Icon type="left-circle" onClick={this.prev}/>
        <Icon type="right-circle" onClick={this.next}/>
      </div>
    )
    }else{
      return <NoData/>
    }
  }
  componentDidMount() {
    return this.props.getImage();
  }
};
const mapStateToProps = (state) => {
  return{
    images:state.home.homeLunBoImages,
    ...state,
  }
};
const mapDispatchToProps = (dispatch) => {
  let pagenum=10;
  let index=1
  return {
    getImage(){
      dispatch(actionTypes.gitLunBoImages(pagenum,index))
    },
    // handleFn: (dispacth) => {
    //   dispatch(actionTypes.LunBoImages())
    // }
  }
};


export default connect(mapStateToProps,mapDispatchToProps)(LunBoWrapper);
